/**!
 * easyPieChart
 * Lightweight plugin to render simple, animated and retina optimized pie charts
 *
 * @license
 * @author Robert Fleischmann <rendro87@gmail.com> (http://robert-fleischmann.de)
 * @version 2.1.5
 **/

(function (root, factory) {
  if (typeof exports === 'object') {
    module.exports = factory(require('jquery'));
  } else if (typeof define === 'function' && define.amd) {
    define(['jquery'], factory);
  } else {
    factory(root.jQuery);
  }
}(this, function ($) {

  /**
   * Renderer to render the chart on a canvas object
   * @param {DOMElement} el      DOM element to host the canvas (root of the plugin)
   * @param {object}     options options object of the plugin
   */
  var CanvasRenderer = function (el, options) {
    var cachedBackground;
    var canvas = document.createElement('canvas');

    el.appendChild(canvas);

    if (typeof (G_vmlCanvasManager) !== 'undefined') {
      G_vmlCanvasManager.initElement(canvas);
    }

    var ctx = canvas.getContext('2d');

    canvas.width = canvas.height = options.size;

    // canvas on retina devices
    var scaleBy = 1;
    if (window.devicePixelRatio > 1) {
      scaleBy = window.devicePixelRatio;
      canvas.style.width = canvas.style.height = [options.size, 'px'].join('');
      canvas.width = canvas.height = options.size * scaleBy;
      ctx.scale(scaleBy, scaleBy);
    }

    // move 0,0 coordinates to the center
    ctx.translate(options.size / 2, options.size / 2);

    // rotate canvas -90deg
    ctx.rotate((-1 / 2 + options.rotate / 180) * Math.PI);

    var radius = (options.size - options.lineWidth) / 2;
    if (options.scaleColor && options.scaleLength) {
      radius -= options.scaleLength + 2; // 2 is the distance between scale and bar
    }

    // IE polyfill for Date
    Date.now = Date.now || function () {
      return +(new Date());
    };

    /**
     * Draw a circle around the center of the canvas
     * @param {strong} color     Valid CSS color string
     * @param {number} lineWidth Width of the line in px
     * @param {number} percent   Percentage to draw (float between -1 and 1)
     */
    var drawCircle = function (color, lineWidth, percent) {
      percent = Math.min(Math.max(-1, percent || 0), 1);
      var isNegative = percent <= 0 ? true : false;

      ctx.beginPath();
      ctx.arc(0, 0, radius, 0, Math.PI * 2 * percent, isNegative);

      ctx.strokeStyle = color;
      ctx.lineWidth = lineWidth;

      ctx.stroke();
    };

    /**
     * Draw the scale of the chart
     */
    var drawScale = function () {
      var offset;
      var length;

      ctx.lineWidth = 1;
      ctx.fillStyle = options.scaleColor;

      ctx.save();
      for (var i = 24; i > 0; --i) {
        if (i % 6 === 0) {
          length = options.scaleLength;
          offset = 0;
        } else {
          length = options.scaleLength * 0.6;
          offset = options.scaleLength - length;
        }
        ctx.fillRect(-options.size / 2 + offset, 0, length, 1);
        ctx.rotate(Math.PI / 12);
      }
      ctx.restore();
    };

    /**
     * Request animation frame wrapper with polyfill
     * @return {function} Request animation frame method or timeout fallback
     */
    var reqAnimationFrame = (function () {
      return window.requestAnimationFrame ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame ||
          function (callback) {
            window.setTimeout(callback, 1000 / 60);
          };
    }());

    /**
     * Draw the background of the plugin including the scale and the track
     */
    var drawBackground = function () {
      if (options.scaleColor) {
        drawScale();
      }
      if (options.trackColor) {
        drawCircle(options.trackColor, options.lineWidth,
            1);
      }
    };

    /**
     * Canvas accessor
     */
    this.getCanvas = function () {
      return canvas;
    };

    /**
     * Canvas 2D context 'ctx' accessor
     */
    this.getCtx = function () {
      return ctx;
    };

    /**
     * Clear the complete canvas
     */
    this.clear = function () {
      ctx.clearRect(options.size / -2, options.size / -2, options.size,
          options.size);
    };

    /**
     * Draw the complete chart
     * @param {number} percent Percent shown by the chart between -100 and 100
     */
    this.draw = function (percent) {
      // do we need to render a background
      if (!!options.scaleColor || !!options.trackColor) {
        // getImageData and putImageData are supported
        if (ctx.getImageData && ctx.putImageData) {
          if (!cachedBackground) {
            drawBackground();
            cachedBackground = ctx.getImageData(0, 0, options.size * scaleBy,
                options.size * scaleBy);
          } else {
            ctx.putImageData(cachedBackground, 0, 0);
          }
        } else {
          this.clear();
          drawBackground();
        }
      } else {
        this.clear();
      }

      ctx.lineCap = options.lineCap;

      // if barcolor is a function execute it and pass the percent as a value
      var color;
      if (typeof (options.barColor) === 'function') {
        color = options.barColor(percent);
      } else {
        color = options.barColor;
      }

      // draw bar
      drawCircle(color, options.lineWidth, percent / 100);
    }.bind(this);

    /**
     * Animate from some percent to some other percentage
     * @param {number} from Starting percentage
     * @param {number} to   Final percentage
     */
    this.animate = function (from, to) {
      var startTime = Date.now();
      options.onStart(from, to);
      var animation = function () {
        var process = Math.min(Date.now() - startTime,
            options.animate.duration);
        var currentValue = options.easing(this, process, from, to - from,
            options.animate.duration);
        this.draw(currentValue);
        options.onStep(from, to, currentValue);
        if (process >= options.animate.duration) {
          options.onStop(from, to);
        } else {
          reqAnimationFrame(animation);
        }
      }.bind(this);

      reqAnimationFrame(animation);
    }.bind(this);
  };

  var EasyPieChart = function (el, opts) {
    var defaultOptions = {
      barColor: '#ef1e25',
      trackColor: '#f9f9f9',
      scaleColor: '#dfe0e0',
      scaleLength: 5,
      lineCap: 'round',
      lineWidth: 3,
      size: 110,
      rotate: 0,
      animate: {
        duration: 1000,
        enabled: true
      },
      easing: function (x, t, b, c, d) { // more can be found here: http://gsgd.co.uk/sandbox/jquery/easing/
        t = t / (d / 2);
        if (t < 1) {
          return c / 2 * t * t + b;
        }
        return -c / 2 * ((--t) * (t - 2) - 1) + b;
      },
      onStart: function (from, to) {
        return;
      },
      onStep: function (from, to, currentValue) {
        return;
      },
      onStop: function (from, to) {
        return;
      }
    };

    // detect present renderer
    if (typeof (CanvasRenderer) !== 'undefined') {
      defaultOptions.renderer = CanvasRenderer;
    } else if (typeof (SVGRenderer) !== 'undefined') {
      defaultOptions.renderer = SVGRenderer;
    } else {
      throw new Error('Please load either the SVG- or the CanvasRenderer');
    }

    var options = {};
    var currentValue = 0;

    /**
     * Initialize the plugin by creating the options object and initialize rendering
     */
    var init = function () {
      this.el = el;
      this.options = options;

      // merge user options into default options
      for (var i in defaultOptions) {
        if (defaultOptions.hasOwnProperty(i)) {
          options[i] = opts && typeof (opts[i]) !== 'undefined' ? opts[i]
              : defaultOptions[i];
          if (typeof (options[i]) === 'function') {
            options[i] = options[i].bind(this);
          }
        }
      }

      // check for jQuery easing
      if (typeof (options.easing) === 'string' && typeof (jQuery)
          !== 'undefined' && jQuery.isFunction(jQuery.easing[options.easing])) {
        options.easing = jQuery.easing[options.easing];
      } else {
        options.easing = defaultOptions.easing;
      }

      // process earlier animate option to avoid bc breaks
      if (typeof (options.animate) === 'number') {
        options.animate = {
          duration: options.animate,
          enabled: true
        };
      }

      if (typeof (options.animate) === 'boolean' && !options.animate) {
        options.animate = {
          duration: 1000,
          enabled: options.animate
        };
      }

      // create renderer
      this.renderer = new options.renderer(el, options);

      // initial draw
      this.renderer.draw(currentValue);

      // initial update
      if (el.dataset && el.dataset.percent) {
        this.update(parseFloat(el.dataset.percent));
      } else if (el.getAttribute && el.getAttribute('data-percent')) {
        this.update(parseFloat(el.getAttribute('data-percent')));
      }
    }.bind(this);

    /**
     * Update the value of the chart
     * @param  {number} newValue Number between 0 and 100
     * @return {object}          Instance of the plugin for method chaining
     */
    this.update = function (newValue) {
      newValue = parseFloat(newValue);
      if (options.animate.enabled) {
        this.renderer.animate(currentValue, newValue);
      } else {
        this.renderer.draw(newValue);
      }
      currentValue = newValue;
      return this;
    }.bind(this);

    /**
     * Disable animation
     * @return {object} Instance of the plugin for method chaining
     */
    this.disableAnimation = function () {
      options.animate.enabled = false;
      return this;
    };

    /**
     * Enable animation
     * @return {object} Instance of the plugin for method chaining
     */
    this.enableAnimation = function () {
      options.animate.enabled = true;
      return this;
    };

    init();
  };

  $.fn.easyPieChart = function (options) {
    return this.each(function () {
      var instanceOptions;

      if (!$.data(this, 'easyPieChart')) {
        instanceOptions = $.extend({}, options, $(this).data());
        $.data(this, 'easyPieChart', new EasyPieChart(this, instanceOptions));
      }
    });
  };

}));
